<template>
  <div>
      <div v-for="item in couponlist">
          <div class="item" v-if="item.type == 1">
              <div class="lst_left">
                  <div>
                      <h4 class="coupon_name">{{item.name}}（{{item.store_name}}）</h4>
                      <p v-if="item.full_price != '0'" class="coupon_info">折扣劵 <em>满{{item.full_price}}元可用</em> </p>
                      <p v-else class="coupon_info">通用优惠券</p>
                      <p class="coupon_date" v-if="item.end_time !='-1'">{{item.start_time*1000 | formatDate}}-{{item.end_time*1000 | formatDate}}</p>
                      <p class="coupon_date" v-else>使用期限：无期限</p>
                  </div>
                  <div class="xiantiao_icon" :style="xiantiao_icon">
                  </div>
              </div>
              <div class="lst_right">
                  <div>
                    <p class="coupon_price"> <em></em> {{item.ratio}}折</p>
                    <a href="javascript:;" v-if="status == 0" class="coupon_btn" :style="btn" @click="useCoupon(item.store_id)">立即使用</a>
                  </div>
              </div>
          </div>
          <div class="item" v-else-if="item.type == 2">
              <div class="lst_left">
                  <div>
                      <h4 class="coupon_name">{{item.name}}（{{item.store_name}}）</h4>
                      <p v-if="item.full_price != '0'" class="coupon_info">满减劵 <em>满{{item.full_price}}元可用</em> </p>
                      <p v-else class="coupon_info">通用优惠券 </p>
                      <p class="coupon_date" v-if="item.end_time !='-1'">{{item.start_time*1000 | formatDate}}-{{item.end_time*1000 | formatDate}}</p>
                      <p class="coupon_date" v-else>使用期限：无期限</p>
                  </div>
                  <div class="xiantiao_icon" :style="xiantiao_icon">
                  </div>
              </div>
              <div class="lst_right">
                  <div>
                    <p class="coupon_price"> <em>&yen;</em> {{item.price}}</p>
                    <a href="javascript:;" v-if="status == 0" class="coupon_btn" :style="btn" @click="useCoupon(item.store_id)">立即使用</a>
                  </div>
              </div>
          </div>
      </div>
       <p v-if="couponlist.length == 0" style="margin-top: 2rem;color: #ffffff;font-size: .56rem;">没有更多数据喔~</p>
  </div>
</template>
<script>
import {formatDate} from '@/util/date.js';
export default {
    props:{
        status:Number,
        couponlist:Array
    },
    filters: {
        formatDate(time) {
            var date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd');
        }
    },
    data(){
        return{
            btn:{
                backgroundImage: "url(" + require("../../assets/page3_btn_coupon@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
            xiantiao_icon:{
                backgroundImage: "url(" + require("../../assets/coupon-xuxian@2.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
            },
        }
    },
    methods:{
        //使用优惠券
        useCoupon:function(store_id){
            let url = '';
            if(/Alipay/.test(window.navigator.userAgent)) {
                url = this.$store.state.host+'/fang/scanpay/ali?store_id='+store_id;
                window.location.href = url;
            }
            else if (/MicroMessenger/.test(window.navigator.userAgent)) {
                url = this.$store.state.host+'/fang/scanpay/wechat?store_id='+store_id;
                window.location.href = url;
            } else {
                this.showAlert('请使用微信或支付宝支付');
            }

        }
    },
    mounted:function(){
        console.log(this.couponlist,"...............")
    },
    activated:function(){
        //使用keep-alive以后进入页面只会触发activated
        console.log("sdfsdfdsf")
    }
}
</script>
<style scoped>
.item{
    width: 100%;
    height: 4.16rem;
    border-radius: .15rem;
    background: #ffffff;
    margin: .6rem 0;
    display: flex;
    overflow: hidden;
}
.item .lst_left{
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: .92rem;
    text-align: left;
    position: relative;
}
.item .lst_left .xiantiao_icon{
    width: .04rem;
    height: 3.5rem;
    position: absolute;
    right: -.2rem;
}
.item .lst_right{
    width: 4.32rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.item .lst_left .coupon_name{
    font-size: .64rem;
    color: #272727;
    font-weight: 600;
    margin-bottom: .4rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.item .lst_left .coupon_info{
    color: #1ABBA2;
    font-size: .52rem;
    margin-bottom: .4rem;
}
.item .lst_left .coupon_info > em{
    margin-left: .24rem;
}
.item .lst_left .coupon_date{
    color: #B6B6B6;
    font-size: .52rem;
}
.item .lst_left::after {
    content: "";
    display: block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #1AB9A3;
    position: absolute;
    right: -.5rem;
    top: -.45rem;
}
.item .lst_left::before {
    content: "";
    display: block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #1AB9A3;
    position: absolute;
    right: -.5rem;
    bottom: -.45rem;
}
.item .lst_right .coupon_price{
    font-size: .8rem;
    font-weight: bold;
    color: #272727;
    margin-bottom: .24rem;
}
.item .lst_right .coupon_price > em{
    font-size: .58rem;
    color: #181818;
}
.item .lst_right .coupon_btn{
    font-size: .44rem;
    color: #FFFFFF;
    display: block;
    width: 2.88rem;
    height: 1.16rem;
    line-height: 1.12rem;
}
</style>
<style lang="stylus" rel="stylesheet/stylus">
.my-title
    margin-top:1rem;
    font-size:.72rem
    color: #333;
.my-content
    font-size:.52rem
    color: #333;
    text-align: center;
</style>
